<div class="tit p-lr20">
    <a class="c-40d064" href="javascript:;">视频网课</a><em class="p-lr10 c-CCCCCC fs12">/</em><em>编辑课程目录</em>
</div>
<!--star内容区域-->
<div class="mainScroll">
    <div class="mainContainer line-all">
        <ul class="ui-nav-tab wList33">
            <li class="js-step-1"><a href="javascript:;">1.编辑课程基本信息</a></li>
            <li class="js-step-2"><a href="javascript:;">2.编辑课程目录</a></li>
        </ul>
        <div class="tabMainCont">
            <!--star 编辑课程基本信息-->
            <div class="tabItem step-01 hide">
                <div class="line-all p20">


                	<form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">科目：</label>
                            <div class="layui-input-inline">
                                <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">自己填</option>
                                <option value="1">自己填</option>
                            </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题:</label>
                            <div class="layui-input-block">
                                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入..." class="layui-input" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">课程封面:</label>
                            <div class="layui-input-block">
                            	<div class="LH40"><span class="c-ff6600">网课视频图片尺寸建议：400*300(4:3)，最多上传6张</span></div>
                                <div class="site-demo-upload">
                                  <img id="LAY_demo_upload" src="skin/temp/1472442686.jpg">
                                  <div class="site-demo-upbar">
                                    <input name="file" class="layui-upload-file" id="test" type="file">
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">课时:</label>
                            <div class="layui-input-inline">
                                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入..." class="layui-input" type="text">
                            </div>
                            <div class="layui-form-mid layui-word-aux">课时</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">价格:</label>
                            <div class="layui-input-inline">
                                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入..." class="layui-input" type="text">
                            </div>
                            <div class="layui-form-mid layui-word-aux">元</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">有效期:</label>
                            <div class="layui-input-inline">
                                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入..." class="layui-input" type="text">
                            </div>
                            <div class="layui-form-mid layui-word-aux">天</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">适合人群:</label>
                            <div class="layui-input-block">
                                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入..." class="layui-input" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">课程详情：</label>
                            <div class="layui-input-block">
                            	<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
                            </div>
                        </div>
                    </form>
                    
					<script>
					layui.use(['form', 'layedit', 'upload'], function(){
						var form = layui.form(),
						 layedit = layui.layedit;
  						var editIndex = layedit.build('LAY_demo_editor');//创建一个编辑器
						
						layui.upload({
							url: '' //上传接口
							,success: function(res){ //上传成功后的回调
								console.log(res)
							}
						});
					});
					</script>
                </div>

                <div class="p-tb30 tac">
                    <button id="step001" class="layui-btn layui-btn-normal">发布并编辑科目</button>
                </div>
            </div>                
            <!--end 编辑课程基本信息-->
            <!--star 编辑课程目录-->
            <div class="tabItem step-02 hide">
                <!--star-->
                <div class="fix line-all p30 fs14">
                    <div class="edit_course_list">
                        <dl>
                            <dt>
                                <div class="editTit">请：<span>填写章的内容</span></div>
                                <div class="editBtn tar">
                                    <a href="javascript:;" onclick="jsEdit(this);"><span class="ebj">✎</span>编辑</a>
                                	<a href="javascript:;" onclick="jsRemove(this,'dl');"><span>&times;</span>删除</a>
                                </div>
                            </dt>
                            <dd>
                                <div class="editTit">请：<span>填写讲的内容</span></div>
                                <div class="editBtn tar">
                                    <a href="javascript:;" onclick="jsEdit(this);"><span class="ebj">✎</span>编辑</a>
                                	<a href="javascript:;" onclick="jsRemove(this,'dd');"><span>&times;</span>删除</a>
                                </div>
                            </dd>
                            <dd class="bookAdd">
                            	<div class="editTit"><a href="javascript:;" onclick="jsBook_sub(this);"><span>+</span>添加一讲</a></div>
                            </dd>
                        </dl>
                        <dl class="bookAdd">
                        	<dt><a href="javascript:;" onclick="jsBook_par(this);"><span>+</span>添加一章</a></dt>
                        </dl>
                    </div>
                </div>
                <!--end-->
            </div>                
            <!--end 编辑课程目录-->
        </div>
        

    </div>
</div>
<!--end内容区域-->
<script type="text/javascript">
		
	var inputHtml = '<div class="editText"><input type="text" class="text" ></div>';
	var confirmHtml = '<div class="confirmBtn"><a class="btn-confirm u2" href="javascript:;" onclick=jsConfirm(this);>确认</a><a class="btn-close u2" href="javascript:;" onclick=jsClose(this);>取消</a></div>';	
	var ebj_div = '<a href="javascript:;" onclick=jsEdit(this)><span class="ebj">✎</span>编辑</a>';
	var tit_div = '<div class="editTit">请：<span>填写讲的内容</span></div>';

	var btn_div = '<div class="editBtn tar">'+ebj_div+'<a href="javascript:;" onclick=jsRemove(this,"dd")><span>&times;</span>删除</a></div>';
	var subHtml = '';
		subHtml += '<dd>';
			subHtml += ''+tit_div+'';
			subHtml += ''+tit_div+'';
		subHtml += '</dd>';
	
	var parHtml = '';
		parHtml += '<dl>';
			parHtml += '<dt>';
				parHtml += '<div class="editTit">请：<span>填写章的内容</span></div>';
				parHtml += '<div class="editBtn tar">'+ebj_div+'<a href="javascript:;" onclick=jsRemove(this,"dl")><span>&times;</span>删除</a></div>';
			parHtml += '</dt>';
			parHtml += '<dd class="bookAdd">';
				parHtml += '<div class="editTit"><a href="javascript:;" onclick="jsBook_sub(this);"><span>+</span>添加一讲</a></div>';
			parHtml += '</dd>';
		parHtml += '</dl>';
	
	var subeditHtml = '';
		subeditHtml += ''+inputHtml+'';
		subeditHtml += '<div class="editInfo">';
			subeditHtml += '<div class="e_Textarea"><textarea></textarea></div>';
			subeditHtml += '<div><span class="c-999999">从视频库中选择视频，未上传的视频请先上传至视频库</span><a href="javascript:;">上传视频</a></div>';
			subeditHtml += '<div class="fix"><ul class="upload_A">';
			subeditHtml += '<li>';
				subeditHtml += '<input id="myfile" style="display:none" type="file">';
				subeditHtml += '<a href=javascript:document.getElementById("myfile").click()></a>';
				subeditHtml += '<div class="list"><div class="ith_img2 usernane_img120"><span></span></div>';
				subeditHtml += '</div>';
			subeditHtml += '</li>';
			subeditHtml += '</ul></div>';
			subeditHtml += '<div><label><input type="checkbox">允许免费试听，学生无需购买就可以免费学习整节课程。</label></div>';
		subeditHtml += '</div>';
		subeditHtml += ''+confirmHtml+'';
		
	var b_add = '.bookAdd';
	var curr = 'curr';
	
	var edt = '.editTit';
	var edb = '.editBtn';
	var e_Txt = '.editText';
	var c_Btn = '.confirmBtn';
	var sub_edt = '.subeditText';
	
	//添加一章
	function jsBook_par(objthis){
		var $this = $(objthis);
		$this.parents(b_add).before(parHtml);
	}
	//添加一讲
	function jsBook_sub(objthis){
		var $this = $(objthis);
		$this.parents(b_add).before('<dd class="subeditText"></dd>');
		$this.parents(b_add).prev(sub_edt).append(subeditHtml);
	}
	//删除按钮
	function jsRemove(objthis,objval){
		var $this = $(objthis);
		$this.parents(objval).remove();
	}
	//编辑按钮
	function jsEdit(objthis,objval){
		var $this = $(objthis);
		var t_val = $this.parent(edb).siblings(edt).text();
		$this.parent(edb).hide();
		$this.parent(edb).siblings().hide();
		if($('dt')){//章
			$this.parent(edb).parent('dt').addClass(curr).append(inputHtml,confirmHtml);
		};
		if($('dd')){//讲
			$this.parent(edb).parent('dd').addClass('subeditText').append(subeditHtml);
		};
		$this.parent(edb).siblings(e_Txt).children().val(t_val).focus();
	}
	//确认按钮
	function jsConfirm(objthis){
		var $this = $(objthis);
		var f_val = $this.parent(c_Btn).siblings(e_Txt).children().val();
		if(f_val != 0 && f_val != null){
			if($this.parent(c_Btn).parent('dt').is(curr)){
				$this.parent(c_Btn).parent('dt').removeAttr('class');
				$this.parent(c_Btn).siblings(edt).text(f_val).show();
				$this.parent(c_Btn).siblings(edb).show();
				$this.parent(c_Btn).siblings(e_Txt).remove();
				$this.parent(c_Btn).remove();
			}else{
				if($this.parent(c_Btn).siblings().is(edt)){
					$this.parent(c_Btn).siblings(edt).text(f_val).show();
					$this.parent(c_Btn).siblings(edb).show();
				}else{
					$this.parent(c_Btn).siblings(e_Txt).before(tit_div,btn_div);
					$this.parent(c_Btn).siblings(edt).text(f_val);
					$this.parent(c_Btn).siblings(edb);
				};
				$this.parent(c_Btn).parent(sub_edt).removeAttr('class');
				$this.parent(c_Btn).siblings(e_Txt).remove();
				$this.parent(c_Btn).remove();
			};
			
		}else{
			$this.parent(c_Btn).siblings(e_Txt).children().focus();	
		};
	}
	//取消按钮
	function jsClose(objthis,objval){
		var $this = $(objthis);
		if($this.parent(c_Btn).parent('dd').is(sub_edt)){
			if(!$this.parent(c_Btn).siblings().is(edt)){//这是添加讲（没有文本框的）
				$this.parent(c_Btn).parent(sub_edt).remove();
			}else{//这是编辑讲
				$this.parent(c_Btn).parent('dd').removeAttr('class');
				$this.parent(c_Btn).siblings().show();
				$this.parent(c_Btn).siblings(e_Txt).remove();
				$this.parent(c_Btn).remove();
			}
		}else{
			$this.parent(c_Btn).parent('dt').removeAttr('class');
			$this.parent(c_Btn).siblings().show();
			$this.parent(c_Btn).siblings(e_Txt).remove();
			$this.parent(c_Btn).remove();
		};
	}
	//讲-确认按钮
	function jsSubConfirm(objthis){
		var $this = $(objthis);
		var f_val = $this.parent(c_Btn).siblings(e_Txt).children().val();
		if(f_val != 0 && f_val != null){
			if($this.parent(c_Btn).siblings().is(edt)){
				$this.parent(c_Btn).siblings(edt).text(f_val).show();
				$this.parent(c_Btn).siblings(edb).show();
				$this.parent(c_Btn).parent(sub_edt).removeAttr('class');
				$this.parent(c_Btn).siblings(e_Txt).remove();
				$this.parent(c_Btn).remove();
			}else{
				$this.parent(c_Btn).siblings(e_Txt).before(tit_div,btn_div);
				$this.parent(c_Btn).siblings(edt).text(f_val);
				$this.parent(c_Btn).siblings(edb);
				$this.parent(c_Btn).parent(sub_edt).removeAttr('class');
				$this.parent(c_Btn).siblings(e_Txt).remove();
				$this.parent(c_Btn).remove();
			};
		}else{
			$this.parent(c_Btn).siblings(e_Txt).children().focus();	
		};
	}
	//演示步骤（你们看着办好了!）
	$(function(){
		$.fn.Dashentab(".ui-nav-tab","li",".tabMainCont",".tabItem","active","click",0);//此处不一样注意
		//第一步
		$("#step001").click(function(){
			$(".step-01").hide();
			$(".step-02").show();
			$(".ui-nav-tab").find("li").removeClass("active").siblings(".js-step-2").addClass("active");
		})
		//第二步
		$("#step002").click(function(){
			$(".step-02").hide();
			$(".step-03").show();
			$(".ui-nav-tab").find("li").removeClass("active").siblings(".js-step-3").addClass("active");
		})
	})
</script>
